<div fxLayout="row" class="matrix-total">
  <div class="matrix-total-tag" fxLayoutAlign="center center">
    {{totalName}}
  </div>
  <div fxFlex="100%" fxLayout="column" fxLayoutAlign="center">
    <div fxLayout="row" *ngFor="let matrixStateGroupTotal  of matrixStateGroupTotals">
      <label class="matrix-total-group" *ngIf="matrixStateGroupTotals.length&&matrixStateGroupTotals.length>1">
        <span class="check-box">
          <input type="checkbox" [checked]="matrixStateGroupTotal.isChecked"
                 (click)="onGroupClick($event.target,matrixStateGroupTotal)">
          <span class="check"></span>
        </span>
        <span>{{matrixStateGroupTotal.groupName}}</span>
        <span>(<span>{{matrixStateGroupTotal.total}}</span>)</span>
      </label>
      <span>
          <label class="form-label" *ngFor="let stateTotal of matrixStateGroupTotal.stateTotals">
            <span class="check-box" [ngStyle]="{'background': stateTotal.stateColor}">
              <input type="checkbox" [checked]="stateTotal.isChecked" (click)="onClick($event.target,stateTotal)">
              <span class="check"></span>
            </span>
            <span>{{stateTotal.stateName}}</span>
            <span>(<span>{{stateTotal.stateTotal}}</span>)</span>
          </label>
      </span>
    </div>
  </div>
</div>
